<template>
    <div>
        <div  class="wh-full pos-relative">
            <v-chart :option="mapOption" :autoresize="true" @click="handleClick" />
            <n-button v-show="isShowBack" class="pos-absolute top-10 left-10" @click="goBack">返回</n-button>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, computed } from 'vue';
 import { use, registerMap } from 'echarts/core'
import { MapChart, ScatterChart, EffectScatterChart } from 'echarts/charts'
  import { CanvasRenderer } from 'echarts/renderers'
  import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, 
VisualMapComponent } from 'echarts/components'
import * as echarts from 'echarts'
const mapOption = ref()
const isShowBack = ref(false);

// echarts.use([MapChart])
use([
 CanvasRenderer,
 TitleComponent,
 TooltipComponent,
 LegendComponent,
 GridComponent,
 VisualMapComponent,
 MapChart,
 ScatterChart,
 EffectScatterChart
 ])

// 获取地图数据
const getMapJson = async (mapName: string) => {
    const url = `https://geo.datav.aliyun.com/areas_v3/bound/${mapName}.json`
    const mapJson = await fetch(url).then(res => res.json())
    return mapJson
}
// 地图配置
const setOptions = (mapName: string, mapData: any) => {
    return {
        // 鼠标悬浮提示
        tooltip: {
            show: true,
            formatter: function (params: any) {
                if (params && params.data) {
                    const { adcode, name, data } = params.data
                    return `adcode: ${adcode}<br>name: ${name}<br>data: ${data}`;
                }
            }
        },
        // 左下角数据
        visualMap: {
            show: true,
            min: 0,
            max: 100,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true,
            seriesIndex: [0],
            inRange: {
                color: ['#00467F', '#A5CC82'] // 蓝绿
            }
        },
        // 地图
        geo: {
            map: mapName,
            roam: true,
            select: false,
            // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
            selectedMode: 'single',
            label: {
                show: true,
            },
            emphasis: {
                itemStyle: {
                    areaColor: '#389BB7',
                    borderColor: '#389BB7',
                    borderWidth: 0
                },
                label: {
                    fontSize: 14,
                },
            }
        },
        series: [
            // 地图数据
            {
                type: 'map',
                map: mapName,
                roam: true,
                geoIndex: 0,
                select: false,
                data: mapData
            },
            // 散点
            {
                name: '散点',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: mapData,
                itemStyle: {
                    color: '#05C3F9'
                }
            },
            // 气泡点
            {
                name: '点',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'pin', //气泡
                symbolSize: function (val: any) {
                    if (val) {
                        return val[2] / 4 + 20;
                    }
                },
                label: {
                    show: true,
                    formatter: function (params: any) {
                        return params.data.data || 0;
                    },
                    color: '#fff',
                    fontSize: 9,
                },
                itemStyle: {
                    color: '#F62157', //标志颜色
                },
                zlevel: 6,
                data: mapData,
            },
            // 地图标点
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: mapData.map((item: { data: number }) => {
                    if (item.data > 60) return item
                }),
                symbolSize: 15,
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                itemStyle: {
                    color: 'yellow',
                    shadowBlur: 10,
                    shadowColor: 'yellow'
                },
                zlevel: 1
            },
        ]
    }
}

const renderMapEcharts = async (mapName: string) => {
    const mapJson = await getMapJson(mapName)
    registerMap(mapName, mapJson); // 注册地图
    // 为地图生成一些随机数据
    const mapdata = mapJson.features.map((item: { properties: any }) => {
        const data = (Math.random() * 80 + 20).toFixed(0) // 20-80随机数
        const tempValue = item.properties.center ? [...item.properties.center, data]
            : item.properties.center
        return {
            name: item.properties.name,
            value: tempValue, // 中心点经纬度
            adcode: item.properties.adcode, // 区域编码
            level: item.properties.level, // 层级
            data // 模拟数据
        }
    });
    // 更新地图options
    mapOption.value = setOptions(mapName, mapdata)
}
renderMapEcharts('100000_full') // 初始化绘制中国地图
const handleClick = () => {

}
const goBack = () => {

}

</script>

<style lang="scss" scoped>
.map_box {
    width: 100%;
    height: 100%;
    background-color: pink;
}
</style>